<template>
    <div class="app-container">
        <el-table
            :data="reData"
            style="width: 100%"
            border
            v-loading="listLoading"
            fit
            elment-loading-text="拼命加载中..."
        >
            <el-table-column label="序号" min-width="60" align="center">
                <template slot-scope="scope">
                    {{ scope.$index + (currentPage - 1) * pageSize + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="头像" width="80" align="center">
                <template slot-scope="scope">
                    <el-avatar shape="square" size="small" :src="scope.row.avatar"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column label="昵称" min-width="100" align="center">
                <template slot-scope="scope">
                    {{ scope.row.nickname }}
                </template>
            </el-table-column>
            <el-table-column label="评论文章" min-width="150" align="center">
                <template slot-scope="scope">
                    {{ scope.row.blog.title }}
                </template>
            </el-table-column>
            <el-table-column label="评论内容" min-width="250" align="center">
                <template slot-scope="scope">
                    {{ scope.row.content }}
                </template>
            </el-table-column>
            <el-table-column label="评论日期" min-width="150" align="center">
                <template slot-scope="scope">
                    {{ formatTime(scope.row.createDate) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-tooltip content="删除" placement="top">
                        <el-button
                            @click="handleDeleteComment(scope.row)"
                            type="danger"
                            icon="el-icon-delete"
                            circle
                            size="mini"
                        ></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页功能 -->
        <el-pagination
            background
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import { getComment, deleteComment } from "@/api/blog"
import { url } from "@/urlConfig"
import { formatTime } from "@/utils/time"
export default {
    data() {
        return {
            currentPage: 1,
            pageSize: 10,
            total: 0,
            listLoading: false,
            data: []
        }
    },
    computed: {
        reData() {
            const reData = this.data.map((item) => {
                if (!item.avatar.startsWith(url)) {
                    item.avatar = url + item.avatar
                    return item
                }
                return item
            })
            return reData
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        formatTime,
        async fetchData(option = { page: this.currentPage, limit: this.pageSize, blogId: -1, keyword: "" }) {
            this.listLoading = true
            const { data } = await getComment(option)
            this.total = data.total
            this.data = data.rows
            this.listLoading = false
        },
        handleSizeChange(size) {
            this.pageSize = size
            this.fetchData()
        },
        handleCurrentChange(page) {
            this.currentPage = page
            this.fetchData()
        },
        handleDeleteComment(row) {
            this.$confirm("该操作会永久删除该评论, 是否继续?", "是否删除此文章", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(async () => {
                    const res = await deleteComment(row.id)
                    if (res.data) {
                        this.$message({
                            type: "success",
                            message: "删除成功!"
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: "删除失败!" + res.msg
                        })
                    }
                    this.fetchData()
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    })
                })
        }
    }
}
</script>

<style scoped>
.pagination {
    margin: 10px 10px;
    /* 因为inline-block，所以这样可以靠右 */
    text-align: right;
}
</style>
